import * as echarts from 'echarts/core';
/**
 * 数据分析 人员数据分析——大饼图
 * 
 * **/

function calc(theta1, theta2) {
    let r = 0.5; // 半径是0.5 其实表示0.5个直径
    let inner = 0.5; // 里面镂空部分占60%  option中radius为[33%, 55%]  55 * 0.6 == 33

    let cos = Math.cos;
    let sin = Math.sin;
    let PI = Math.PI;
    let min = Math.min;
    let max = Math.max;

    let bottom = 0;
    let left = 2 * r;
    let right = 0;

    // y0: θ1对应的外部点的y值
    // y1: θ2对应的外部点的y值
    // _y0: θ1对应的内部点的y值
    // _y1: θ2对应的内部点的y值
    // x0: θ1对应的外部点的x值
    // x1: θ2对应的外部点的x值
    // _x0: θ1对应的内部点的x值
    // _x1: θ2对应的内部点的x值
    let y0 = r * (1 - cos(theta1));
    let y1 = r * (1 - cos(theta2));

    let _y0 = r * (1 - inner * cos(theta1));
    let _y1 = r * (1 - inner * cos(theta2));

    // 如果这个弧经过θ == PI的点  则bottom = 2PI
    // bottom用于之后的max计算中
    if (theta1 < PI && theta2 > PI) {
        bottom = 2 * r;
    }
    // 计算这几个点的最大最小值
    let ymin = min(_y0, _y1, y0, y1);
    let ymax = max(_y0, _y1, y0, y1, bottom);

    let x0 = r * (1 + sin(theta1));
    let x1 = r * (1 + sin(theta2));

    let _x0 = r * (1 + inner * sin(theta1));
    let _x1 = r * (1 + inner * sin(theta2));

    // 如果这个弧经过θ == PI / 2的点  则right = 2PI
    if (theta1 < PI / 2 && theta2 > PI / 2) {
        right = 2 * r;
    }
    // 如果这个弧经过θ == PI / 2 * 3的点  则left = 0
    if (theta1 < PI / 2 * 3 && theta2 > PI / 2 * 3) {
        left = 0;
    }
    let xmin = min(_x0, _x1, x0, x1, left);
    let xmax = max(_x0, _x1, x1, x0, right);

    return {
        // 计算圆心以及半径
        center: [(r - xmin) / (xmax - xmin), (r - ymin) / (ymax - ymin)],
        radius: r / min(xmax - xmin, ymax - ymin)
    }
}

const indexEchartsPie = (data) => {
    data = [
        { value: 217, name: "18-25岁" },
        { value: 227, name: "26-40岁" },
        { value: 217, name: "40-55岁" },
        { value: 317, name: "60岁以上" }
    ];
    let color = [
        { colorStart: "rgba(255,204,0,0)", colorEnd: "rgba(255,204,0,0.8)", solid: 'rgba(255,204,0,1)' },
        { colorStart: "rgba(41, 74, 118, .3)", colorEnd: "rgba(41, 74, 118, 1)", solid: 'rgba(0,203,255,1)' },
        { colorStart: "rgba(15, 79, 88, 0.8)", colorEnd: "rgba(56, 153, 84, 1)", solid: 'rgba(78, 244, 160, 1)' },
        { colorStart: "rgba(40,242,230,0)", colorEnd: "rgba(40,242,230,0.4)", solid: 'rgba(40,242,230,1)' }
    ];

    // 计算总数
    let total = data.map(v => v.value).reduce((o, n) => o + n);

    // 计算每一个data的其实角度和末了角度 θ1和θ2
    data.reduce((o, v) => {
        v.theta1 = o;
        v.theta2 = o + v.value / total;
        return v.theta2
    }, 0);
    // 添加渐变
    data.forEach((v, i) => {
        let ops = calc(v.theta1 * 2 * Math.PI, v.theta2 * 2 * Math.PI);
        if (v.value) v.itemStyle = {
            color: {
                type: 'radial',
                x: ops.center[0],
                y: ops.center[1],
                r: ops.radius,
                colorStops: [{
                    offset: 0, color: color[i].colorStart
                }, {
                    offset: 0.32, color: color[i].colorStart
                }, {
                    offset: 0.95, color: color[i].colorEnd
                }, {
                    offset: 0.95, color: color[i].solid
                }, {
                    offset: 1, color: color[i].solid
                }],
                globalCoord: false // 缺省为 false
            }
        }
    })
    const center = ['50%','55%']
    const defaultConfig = {
      
        tooltip: {
            trigger: "item",
            axisPointer: {
                type: 'shadow',
            },
            backgroundColor: "rgba(0,0,0,.6)",
            borderColor: "rgba(147, 235, 248, 1)",
            textStyle: {
                color: "#FFF",
            },
            formatter: "{b} : {c}人 ({d}%)"
        },

        calculable: true,
        series: [
            {
                type: "pie",
                center,
                radius: "18%",
                hoverAnimation: false,
                labelLine: { show: false, },
                itemStyle: { color: '#c2d7fd' },
                tooltip: { show: false },
                data: [0]
            },
            {
                type: "pie",
                center,
                radius: ["24%", "25%"],
                hoverAnimation: false,
                labelLine: { show: false, },
                itemStyle: { color: '#c2d7fd', opacity: 0.4 },
                tooltip: { show: false },
                data: [0]
            },
          
            {
                type: "pie",
                name: '年龄段人口数',
                center,
                radius: ["30%", "55%"],
                roseType: true,
                zlevel: 10,
                label: {
                    formatter: params => {
                        let datas = data;
                        let target;
                        var total = 0;
                        for (let i = 0; i < datas.length; i++) {
                            total += datas[i].value;
                            if (datas[i].name == params.name) {
                                target = datas[i].value;
                            }
                        }
                        let arr = ["{a|" + params.data.name + "}"];
                        return arr.join("\n");
                    },
                    rich: {
                        a: {
                            fontSize: 15,
                            color: "#fff",
                            lineHeight: 50,
                        }
                    },
                    alignTo: 'labelLine'
                },
                labelLine: {
                    length: 10,
                    length2: 35,
                    lineStyle: {
                        color: "rgba(255,255,255,0.4)",
                    }
                },
                data
            }
        ]

    };

    const opt = { ...defaultConfig };
    return opt;
};

export default {
    indexEchartsPie
};
